<template>
  <q-layout>
    <q-page-container>
      <q-page class="flex items-center justify-center">
        <q-card>
          <q-card-section>
            <div class="text-h6">测试WebSocket</div>
            <div>
              {{ webStore.tokenInfo.tokenValue }}
            </div>
          </q-card-section>
        </q-card>
      </q-page>
    </q-page-container>
  </q-layout>
</template>

<script setup lang="ts">
import { useWebStore } from 'src/stores/webStore'
import { useYuan } from 'src/use'
import WebsocketReconnect from 'src/web-socket'

const { Fail } = useYuan()

const webStore = useWebStore()

const url = 'ws://localhost:17813/im-server'
const ws = new WebsocketReconnect(url, [], {
  minReconnectionDelay: 10000,
  reconnectionDelayGrowFactor: 1.1,
  enableHeartbeat: true,
  debug: true,
})
console.log(ws)

ws.onopen = function () {
  console.log('connect success')
  // 这里面应该增加发送用户ID
  ws.send(JSON.stringify({ tokenVal: webStore.tokenInfo.tokenValue }))
}
ws.onclose = function (e) {
  Fail('通讯错误')
  console.log('onclose', e)
}
ws.onerror = function (e) {
  console.log('onerror', e)
}
ws.onmessage = function (e) {
  const res = JSON.parse(e.data)
  console.log('onmessage:', res)
}
ws.onreconnect = function (e) {
  console.log('onreconnect', e)
}
</script>

<style scoped></style>
